<template>
  <div>
    <nav-bar title="我要卖号"/>
    <div class="content_scroll">
      <van-field
        v-model="gamename"
        label="添加游戏"
        placeholder="请选择游戏"
        input-align="right"
        :is-link="true"
      />
      <van-field
        v-model="titlename"
        label="选择小号"
        placeholder="请选择小号"
        input-align="right"
        :is-link="true"
      />
      <van-field
        v-model="area"
        label="游戏区服"
        placeholder="请填写区服信息"
        input-align="right"
      />
      <van-field
        v-model="price"
        label="出售价"
        placeholder="不低于6元"
        input-align="right"
        maxlength="5"
      />
      <van-field
        label-width="6.666667rem"
        v-model="sale"
        label="出售可得（手续费5%，最低5元）"
        placeholder="0.00元"
        input-align="right"
        :readonly="true"
      />
      <div class="input_line"></div>
      <van-field
        v-model="title"
        label="标题"
        input-align="right"
        :is-link="true"
      />
      <van-field
        label-width="4rem"
        v-model="describe"
        label="商品描述：（选填）"
        input-align="right"
        :is-link="true"
      />
      <van-field
        label-width="4.5rem"
        v-model="password"
        label="二级密码：（有则必填）"
        input-align="right"
        :is-link="true"
      />
      <div class="input_line"></div>
      <van-field
        v-model="screenshot"
        label="游戏截图"
        placeholder="3-9张游戏内截图"
        input-align="right"
        :readonly="true"
      />
      <van-field name="uploader">
        <template #input>
          <van-uploader 
            v-model="uploader" 
            max-count="9"/>
        </template>
      </van-field>
      <van-button class="sell_btn" round>确认出售</van-button>
    </div>
    <van-popup v-model="show" round :close-on-click-overlay="false">
      <div class="popup_bg">
        <img src="../../../../assets/img/transaction/lhh_tra_rule1.png" alt="">
        <van-checkbox 
          v-model="checked" 
          checked-color="#ff5543"
          class="checked"
          shape="square"
          >我已阅读</van-checkbox>
        <van-button 
          class="button" 
          round
          :disabled="!checked"
          @click="sureClick">
          我已知晓</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import NavBar from '../../../../components/common/navbar/NavBar.vue'
export default {
  name: "TransactionSell",
  components: {
    NavBar,
  },
  data() {
    return {
      show: true,
      checked: true,
      gamename: '',
      titlename:'',
      area: '',
      price: '',
      title: '',
      describe: '',
      password: '',
      screenshot: '',
      uploader: [],
    }
  },
  methods: {
    sureClick() {
      this.show = false
    }
  },
  computed: {
    sale() {
      if(this.price !== '') {
        var str = parseFloat(this.price * 0.05)
        str = str >= 5? str : 5
        var total = parseFloat(this.price - str)
        total = total >= 0 ? total : 0
        total = total.toFixed(2) + '元'
        return total
      }
    }
  },
}
</script>

<style lang="less" scoped>
.popup_bg {
  width: 9.146667rem;
  height: 16rem;
  overflow: hidden;
  background: #fff;
  img {
    width: 9.146667rem;
  }
  .checked {
    font-size: .4rem;
    font-weight: bold;
    color: #222222;
    padding: .066667rem .533333rem 0;
  }
}

.button {
  width: 4rem;
  height: 1.066667rem;
  border: 0;
  margin: .266667rem 2.573333rem 0;
  color: #fff;
  background: linear-gradient(147deg, #FF801B 0%, #FC5B32 100%);
}

.sell_btn {
  width: 8rem;
  height: 1.066667rem;
  color: #fff;
  font-size: .426667rem;
  border: 0;
  background: #ff5543;
  margin: .666667rem 1rem;
}

.input_line {
  width: 10rem;
  height: .133333rem;
  background: #eeeeee;
}
</style>